<template>
    <breadcrumb base-title="客户" title="签单客户" sub-title="长期保"/>
    <div class="w-full box-border p-16px">
        <div class="mg-b-16">
            <clientInfo :id="id" :company-id="companyId" />
            <commonTabs v-model:active="active" :tabs="tabs"/>
        </div>
        <div v-show="active === 1">
            <statisticsAnalysis :company-id="companyId"/>
        </div>
        <div v-show="active === 2">
            <plusMinusInsure :company-id="companyId"/>
        </div>
        <div v-show="active === 3">
            <rechargeRecord :company-id="companyId" insure-type="long"/>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted,onActivated } from 'vue'
import { useRoute } from 'vue-router'

import clientInfo from './components/clientInfo.vue'
import commonTabs from '@/components/commonTabs/index.vue'
import statisticsAnalysis from './components/periodInsure/statisticsAnalysis.vue'
import plusMinusInsure from './components/periodInsure/plusMinusInsure.vue'
import rechargeRecord from './components/periodInsure/rechargeRecord.vue'

const id = ref('')
const companyId = ref('')
const route = useRoute()

const active = ref(1)
const tabs = ref([
    {
        name: '统计分析',
        id: 1
    },
    {
        name: '加减保',
        id: 2
    },
    {
        name: '账户明细',
        id: 3
    }
])

onMounted(() => {
    id.value = atob(route.query.id)
    companyId.value = atob(route.query.companyId)
})
onActivated(() => {
    id.value = atob(route.query.id)
    companyId.value = atob(route.query.companyId)
})
</script>
<style lang="scss" scoped>
.container {
    padding: 16px;
}
</style>